<script lang="ts" setup>
interface TitleBarProps {
    text?: string
    showBack?: boolean
}

defineProps<TitleBarProps>()
const emit = defineEmits(['back'])
</script>

<template>
    <div class="umrp-title-bar">
        <slot></slot>
        <div class="umrp-title-bar-back" v-if="showBack">
            <umrp-icon name="left" :size="16" @click="emit('back')"></umrp-icon>
        </div>
        <div class="text" v-if="text">
            <umrp-text>{{ text }}</umrp-text>
        </div>
        <div class="umrp-title-bar-action">
            <div class="more">
                <div class="dot"></div>
                <div class="dot dot-middle"></div>
                <div class="dot"></div>
            </div>
            <div class="divider"></div>
            <div class="circle">
                <div class="circle-outer">
                    <div class="circle-inner"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.umrp-title-bar {
    background-color: #fff;
    position: relative;
    padding: 10px;
    display: flex;
    align-items: center;

    &-back {
        position: absolute;
        left: 10px;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .text {
        width: 100%;
        text-align: center;
    }

    &-action {
        position: absolute;
        right: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        float: right;
        border: 1px solid var(--border-color);
        padding: 4px 10px;
        border-radius: 100px;
        font-size: 12px;
        background-color: #fff;
    }

    .divider {
        width: 1px;
        height: 13px;
        background-color: #ccc;
    }

    .more {
        display: flex;
        gap: 2px;
        align-items: center;

        .dot {
            width: 6px;
            height: 6px;
            background-color: #999;
            border-radius: 100px;
        }
    }

    .circle {
        &-outer {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 12px;
            height: 12px;
            border: 2px solid #999;
            border-radius: 100px;
        }

        &-inner {
            width: 6px;
            height: 6px;
            background-color: #999;
            border-radius: 100px;
        }
    }
}
</style>